<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        /*背景颜色*/
        div {
            background-color: aqua;

            /*设置圆角矩形*/
            border-radius: 50px;
        }

        body {
            background-color: aquamarine;
        }


        /*字体*/
        .font-family .one {
            font-family: 'Microsoft YaHei';
        }

        .font-family .two {
            font-family: '宋体';
        }


        /*大小*/
        .font-size .one {
            font-size: 40px;
        }

        .font-size .two {
            font-size: 20px;
        }


        /*粗细*/
        .font-weight .one {
            font-weight: 900;
        }

        .font-weight .two {
            font-weight: 100;
        }


        /*文字样式*/
        .font-style em {
            font-style: normal;
        }

        .font-style div {
            font-style: italic;
        }


        /*文本属性*/

        /*设置文本颜色*/
        .color {
            color: red;
            /* color: rgb(255, 0, 0); */
            /* color: #ff0000; */
        }

        .text-align {
            color: red;
        }

        /*文本对齐*/
        .text-align .one {
            text-align: left;
        }

        .text-align .two {
            text-align: right;
        }

        .text-align .three {
            text-align: center;
        }

        /*文本装饰*/
        .text-decorate .one {
            text-decoration: none;
        }

        .text-decorate .two {
            text-decoration: underline;
        }

        .text-decorate .three {
            text-decoration: overline;
        }

        .text-decorate .four {
            text-decoration: line-through;
        }

        /*文本缩进*/
        .text-indent .one {
            text-indent: 2em;
        }

        .text-indent .two {
            text-indent: -2em;
        }



        /*行高*/
        .line-height .one {
            line-height: 40px;
            font-size: 16px;
        }

        /*行高等与元素高度, 就可以实现文字居中对齐*/
        .line-height .two {
            height: 100px;
            line-height: 100px;
        }


        /*背景图片*/
        /*.bgi .one {
            background-image: url(https://tse2-mm.cn.bing.net/th/id/OIP-C.YOeDd23we3beyKXY_zAMxwHaEK?pid=ImgDet&rs=1);
            height: 250px;
        }*/

        .bgr .one {
            background-image: url(https://tse2-mm.cn.bing.net/th/id/OIP-C.YOeDd23we3beyKXY_zAMxwHaEK?pid=ImgDet&rs=1);
            height: 300px;
            background-repeat: no-repeat;
        }

        .bgr .two {
            background-image: url(https://tse2-mm.cn.bing.net/th/id/OIP-C.YOeDd23we3beyKXY_zAMxwHaEK?pid=ImgDet&rs=1);
            height: 300px;
            background-repeat: repeat-x;
        }

        .bgr .three {
            background-image: url(https://tse2-mm.cn.bing.net/th/id/OIP-C.YOeDd23we3beyKXY_zAMxwHaEK?pid=ImgDet&rs=1);
            height: 300px;
            background-repeat: repeat-y;
        }


        /*背景位置 方位名词: (top, left, right, bottom)*/
        .bgp .one {
            background-image: url(https://tse2-mm.cn.bing.net/th/id/OIP-C.YOeDd23we3beyKXY_zAMxwHaEK?pid=ImgDet&rs=1);
            height: 500px;
            background-repeat: no-repeat;
            background-color: purple;
            background-position: center;
        }


        /*背景尺寸 length|percentage|cover|contain*/
        .bgs .one {

            height: 300px;
            background-image: url(https://tse2-mm.cn.bing.net/th/id/OIP-C.YOeDd23we3beyKXY_zAMxwHaEK?pid=ImgDet&rs=1);

            background-size: cover;
        }


        /*设置圆形*/

    </style>








    <div class="font-family">
        <div class="one">
            这是微软雅黑
        </div>
        <div class="two">
            这是宋体
        </div>
    </div>

    <div class="font-size">
        <div class="one">
            大大大
        </div>
        <div class="two">
            小小小
        </div>
    </div>

    <div class="font-weight">
        <div class="one">
            粗粗粗
        </div>
        <div class="two">
            细细细
        </div>
    </div>

    <div class="font-style">
        <em>
            放假啦
        </em>
        <div class="one">
            听说要加班
        </div>
    </div>

    <div class="color">文本属性设置文本颜色</div>

    <div class="text-align">
        <div class="one">左对齐</div>
        <div class="two">右对齐</div>
        <div class="three">居中对齐</div>
    </div>

    <div class="text-decorate">
        <div class="one">啥都没有</div>
        <div class="two">下划线</div>
        <div class="three">上划线</div>
        <div class="four">删除线</div>
    </div>

    <div class="text-indent">
        <div class="one">正常缩进</div>
        <div class="two">反向缩进</div>
    </div>
    <br>
    <div class="line-height">
        <div>
            上一行
        </div>
        <div class="one">
            中间行
        </div>
        <div>
            下一行
        </div>
    </div>
    <br>

    <div class="line-height">
        <div class="two">
            文本垂直居中
        </div>
    </div>
    <br>
    <div class="bgi">
        <div class="one">背景图片</div>
    </div>
    <br>
    <div class="bgr">
        <div class="one">不平铺</div>
        <div class="two">水平平铺</div>
        <div class="three">垂直平铺</div>
    </div>
    <br>
    <div class="bgp">
        <div class="one">背景居中</div>
    </div>
    <br>
    <div class="bgs">
        <div class="one">背景尺寸</div>
    </div>










</body>

</html>